<template>
    <div class="wait-deal">
        <div class="header">
            <div class="state">{{refundInfo.process | refundProcess}}</div>
        </div>
        <div class="tips" v-if="refundInfo.process===refundTypes.REFUSE||refundInfo.process===refundTypes.CREATE">
            <div class="note">
                <p>如果商家同意，请按照给出的地址进行退货</p>
                <p>如果商家拒绝，或在超时结束前未处理，需要您修改申请</p>
            </div>
            <div class="btn">
                <cancelRefund class="cancel" :refundId="refundId"/>
                <modifyRefund class="modify" :refundId="refundId"/>
            </div>
        </div>
        <div class="logistics" v-if="refundInfo.process===refundTypes.USER_SEND">
            <svg class="icon logistics-icon" aria-hidden="true">
                <use xlink:href="#icon-Logistics"></use>
            </svg>
            <div class="content">
                <h1>退货物流：{{refundInfo.company}}({{refundInfo.number}})</h1>
                <div>{{logistics.context}}</div>
                <div class="time">{{logistics.time}}</div>
            </div>
        </div>
        <order-single-goods :good="goods" :type="1" :remarkShow="true"/>
        <div class="price">
            <p>退款金额：</p>
            <span>￥{{refundInfo.money}}</span>
        </div>
        <!--<div class="history" @click="toHistory">-->
        <!--<p>协商历史</p>-->
        <!--<div class="history-num" v-if="refundInfo.message === 'platform'">!</div>-->
        <!--<svg class="icon" aria-hidden="true">-->
        <!--<use xlink:href="#icon-chevronright"></use>-->
        <!--</svg>-->
        <!--</div>-->
        <div class="record">
            <p>退款类型：{{refundInfo.status | refundType}}</p>
            <p>退款原因：{{refundInfo.reason}}</p>
            <p>申请时间：{{refundInfo.created}}</p>
            <p>退款编号：{{refundInfo.oid}}</p>
        </div>
        <div class="history">
            <h1 class="title">协商历史:</h1>
            <p class="note" v-if="historyList.length===0">暂无历史记录</p>
            <ul v-else>
                <li v-for="(info, index) in historyList" :key="index">
                    <div class="row-container">
                        <div class="row">
                            <h1>{{info.launch_type | nameFil}}：</h1>
                            <p>{{info.created}}</p>
                        </div>
                        <p class="content">{{info.content}}</p>
                    </div>
                    <ul class="pic">
                        <li v-for="(item, index1) in info.img" :key="index1">
                            <img :src=item @click="previewImage(info.img, index1)">
                        </li>
                    </ul>
                    <div class="line"></div>
                </li>
            </ul>
        </div>
        <contact-service></contact-service>
    </div>
</template>

<script type="text/ecmascript-6">
    import API from '../../../request/api';
    import OrderSingleGoods from "../../../components/common/order-single-goods";
    import RefundTypes from "../../../common/RefundTypes";
    import cancelRefund from "../../../components/User/cancelRefund";
    import modifyRefund from "../../../components/User/modifyRefund";
    import ContactService from "../../../components/User/contact-service";
    import {ImagePreview} from 'vant';

    export default {
        name: 'refund-state',
        components: {
            ContactService,
            OrderSingleGoods, RefundTypes, cancelRefund, modifyRefund},
        data() {
            return {
                refundTypes: RefundTypes.types,//根据订单状态展示不用模块
                goods: {}, // 售后商品信息
                refundInfo: {}, //售后信息
                refundId: this.$route.query.refundId,
                logistics: '',
                historyList: [] // 协商历史
            };
        },
        computed: {},
        mounted() {
            let data = {
                after_id: this.refundId
            };
            this.request.get(API.afternews, data).then(res => {
                this.refundInfo = res[0];
                if(this.refundInfo.process == 2){
                    this.$router.replace({
                        name: 'refund-wait-return',
                        query: {
                            refundId: this.refundId
                        }
                    })
                } else {
                    // 获取售后商品信息
                    this.getGoodsInfo();
                    if (this.refundInfo.company !== '') {
                        this.getLogistics();
                    }
                }
            });
            this.request.get(API.afterconsult, data).then(res => {
                // 获取协商历史列表
                this.historyList = res;
            }, () => {
            });
        },
        methods: {
            getGoodsInfo(){
                let data = {
                    oid: this.refundInfo.oid,
                    gid: this.refundInfo.gid,
                    buyid: this.refundInfo.buyid
                };
                console.log(555);
                this.request.get(API.goodinfo, data).then(res => {
                    this.goods = res[0];
                }, () => {
                });
            },
            getLogistics() {
                let data1 = {
                    company: this.refundInfo.company,
                    number: this.refundInfo.number
                    // company: '韵达快运',
                    // number: '3832785692195'
                };
                this.request.get(API.getlogistics, data1).then(res => {
                    //获取物流信息
                    this.logistics =res.data;
                    console.log(222, res)
                }, () => {
                });
            },
            toHistory() {
                this.$router.push({
                    name: 'refund-history',
                    query: {
                        refundId: this.refundId
                    }
                })

            },
            previewImage(list, index) {
                ImagePreview({
                    images: list,
                    startPosition: index,
                    onClose() {}
                });
            }
        },
        filters:{
            nameFil(type){
                if(type === 'platform'){
                    return '商家'
                } else {
                    return this.$store.state.login.userInfo.nickname
                }
            }
        },
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import '~assets/main.styl';
    .icon {
        width: 4vw
        height: 4vw
        fill: gray9
    }

    .order-goods {
        background grayF
    }

    .wait-deal {
        overflow-x hidden
        .header {
            background main-liner 100% 100% no-repeat
            color grayF
            height vw(80)
            display flex
            flex-direction column
            justify-content center
            padding cellPadding
            box-sizing border-box
            line-height 1.5
            .state {
                font-size word16
            }
        }
        .goods-all {
            background grayF
        }
        .logistics {
            flex-x(center, flex-start)
            padding cellPadding
            background-color grayF
            margin-bottom 1px
            .logistics-icon {
                color gray6
                width vw(20)
                height vw(20)
            }
            .content {
                flex: 1;
                font-size word12
                color gray6
                margin 0 smallMargin
                line-height 1.4
                h1 {
                    font-size word14
                    color gray3
                    margin-bottom 1vw
                }
                .time {
                    color gray9
                    margin-top titleMargin
                }
            }
        }
        .tips {
            background grayF
            padding 2vw 0
            .note {
                padding 3vw cellPadding
                p {
                    line-height 1.5
                    word-vw(vw(12), gray9);
                }
            }
            .btn {
                padding 3vw vw(20)
                flex-center()
                .cancel {
                    color gray3
                    font-size word14
                    text-align center
                    width vw(120)
                    border vw(1) solid gray9
                    border-radius vw(30)
                    height vw(35)
                    line-height vw(35)
                }
                .modify {
                    margin-left middleMargin
                    color main-color
                    border vw(1) solid main-color
                    font-size word14
                    text-align center
                    width vw(120)
                    border-radius vw(30)
                    height vw(35)
                    line-height vw(35)
                }
            }
        }
        .price {
            flex-x();
            height vw(40)
            line-height vw(40)
            padding 0 4vw
            background grayF;
            span {
                color: main-color
            }
        }
        /*.history {
            height vw(40)
            line-height vw(40)
            background grayF;
            padding 0 4vw
            flex-x();
            margin-top smallMargin
        }*/
        .record {
            margin-top smallMargin
            background grayF
            padding cellPadding
            p {
                line-height 1.5
                word-vw(vw(12), gray9)
            }
        }
    }
    /*.history-num {
         word-vw(word12, grayF)
         display flex
         text-align center
         justify-content center
         align-items center
         background-color main-color
         border-radius all-radius
         width vw(18)
         height vw(18)
         position absolute
         right vw(32)
    }*/
    .history {
        margin-top smallMargin
        width: 100vw
        background grayF
        padding 0 cellPadding
        box-sizing border-box
        .note{
            font-size vw(12)
            color: gray9
            padding 2vw cellPadding 6vw
            text-align center
        }
        .title {
            padding 4vw 0 2vw
        }
        ul {
            .row-container{
                min-height vw(60)
            }
            .row {
                flex-x()
                padding-top vw(10)
                p {
                    font-size vw(12)
                    color: gray9
                }
            }
            .content {
                color: gray9
                font-size vw(12)
                line-height vw(16)
                padding-top vw(11)
            }
            .pic {
                flex-x(flex-start)
                li {
                    width: vw(60)
                    height: vw(60)
                    img {
                        width: 100%
                    }
                }
            }
        }
    }
</style>
